<script setup lang="ts">
import { ref, watch } from 'vue';
import type { FileNode } from '../types';

// Props
const props = defineProps<{
  node: FileNode;
  expanded?: boolean;
}>();

// Emits
const emit = defineEmits<{
  click: [node: FileNode];
  toggle: [node: FileNode];
}>();

// 组件状态
const isExpanded = ref(props.expanded || false);

// 监听prop变化
watch(() => props.expanded, (newValue) => {
  if (newValue !== undefined) {
    isExpanded.value = newValue;
  }
});

// 处理点击事件
const handleClick = (e: MouseEvent) => {
  e.stopPropagation();
  emit('click', props.node);
};

// 处理切换目录展开/折叠或文件点击
const handleToggle = (e: MouseEvent) => {
  e.stopPropagation();
  if (props.node.isDirectory) {
    isExpanded.value = !isExpanded.value;
    emit('toggle', props.node);
  } else {
    // 如果是文件，触发点击事件
    emit('click', props.node);
  }
};
</script>

<template>
  <div class="file-tree-item">
    <!-- 目录或文件图标和名称 -->
    <div class="item-header" @click="handleToggle">
      <!-- 目录展开/折叠指示器 -->
      <span v-if="node.isDirectory" class="toggle-icon">
        {{ isExpanded ? '▼' : '►' }}
      </span>
      <span v-else class="indent"></span>
      
      <!-- 文件类型图标 -->
      <span class="item-icon">
        {{ node.isDirectory ? '📁' : '📄' }}
      </span>
      
      <!-- 文件/目录名称 -->
      <span 
        class="item-name"
        :class="{ 'is-file': !node.isDirectory }"
        @click="node.isDirectory ? handleToggle : handleClick"
      >
        {{ node.name }}
      </span>
    </div>
    
    <!-- 子目录内容 -->
    <div v-if="node.isDirectory && isExpanded && node.children" class="children">
      <FileTreeItem
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        @click="emit('click', $event)"
        @toggle="emit('toggle', $event)"
      />
    </div>
  </div>
</template>

<style scoped>
.file-tree-item {
  font-size: 0.9rem;
  user-select: none;
}

.item-header {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.item-header:hover {
  background-color: #f0f0f0;
}

.toggle-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #666;
  margin-right: 4px;
}

.indent {
  width: 16px;
  margin-right: 4px;
}

.item-icon {
  margin-right: 6px;
  font-size: 1rem;
}

.item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-name.is-file {
  cursor: pointer;
  color: #333;
}

.item-name.is-file:hover {
  color: #42b983;
  text-decoration: underline;
}

.children {
  margin-left: 16px;
  border-left: 1px dashed #ddd;
  padding-left: 10px;
}

/* 深色主题样式 */
.dark-theme .file-tree-item {
  color: #d4d4d4;
}

.dark-theme .item-header {
  color: #d4d4d4;
}

.dark-theme .item-header:hover {
  background-color: #2d2d2d;
}

.dark-theme .toggle-icon {
  color: #999;
}

.dark-theme .item-name {
  color: #d4d4d4;
}

.dark-theme .item-name.is-file {
  color: #d4d4d4;
}

.dark-theme .item-name.is-file:hover {
  color: #42b983;
  text-decoration: underline;
}

.dark-theme .children {
  border-left-color: #333;
}
</style>